<template>
  <div class="no-ntegration-alert cursor-pointer">
    <!-- <el-skeleton :loading="loading"
                 animated
                 :rows="1" /> -->
    <el-alert v-if="!loading"
              type="warning">
      <div class="flex no-ntegration-alert--short">
        <span>⚠️</span>
        <i18n path="custom.reports.noIntegrationReport"
              tag="span"
              class="no-ntegration-alert--shorti">
          <span place="total">{{total}}</span>
          <span place="type">{{type | filterType}}</span>
        </i18n>
      </div>

      <div class="no-ntegration-alert--full">
        <i18n path="custom.reports.noIntegrationAlert"
              tag="div">
          <span place="total">{{total}}</span>
          <span place="integration">{{integration}}</span>
          <span place="type">{{type}}</span>
        </i18n>

        <GoToConnect />
      </div>

    </el-alert>
  </div>

</template>

<script>
import GoToConnect from './go-to-connect.vue'
import { capitalize } from 'lodash'
export default {
  name: 'NoIntegrationAlert',
  components: {
    GoToConnect
  },
  props: {
    integration: {
      type: [Number, String],
      default: 0
    },
    total: {
      type: [Number, String],
      default: 0
    },
    type: {
      type: String,
      require: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  filters: {
    filterType (val) {
      return capitalize(val)
    }
  }
}
</script>
<style lang="scss" scoped>
.no-ntegration-alert {
  width: 260px;
  margin-left: 16px;
  height: 32px;

  ::v-deep .el-skeleton {
    height: 32px;
    display: flex;
    align-items: center;
    &__item {
      background: #f2f2f2;
      display: inline-block;
      height: 16px;
      border-radius: 4px;
      width: 100%;
    }
    &.is-animated .el-skeleton__item {
      background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
      background-size: 400% 100%;
      animation: el-skeleton-loading 1.4s ease infinite;
    }
  }
  .el-alert {
    padding: 0 10px;
    z-index: 999;
    &:hover {
      .no-ntegration-alert--shorti {
        color: #404040;
        text-shadow: 0.5px 0 0 currentColor;
      }
      .no-ntegration-alert--full {
        height: auto;
      }
      ::v-deep .el-alert__content {
        .el-alert__closebtn {
          visibility: inherit;
        }
      }
    }
    .no-ntegration-alert--full {
      height: 0;
      font-size: 12px;
      color: #404040;
      line-height: 18px;
    }
    .no-ntegration-alert--short {
      padding: 9px 0;
      font-size: 12px;
    }

    ::v-deep .el-alert__content {
      padding: 0;
      .el-alert__description {
        margin: 0;
        line-height: 12px;
        color: #404040;
      }
      .el-alert__closebtn {
        visibility: hidden;
        color: #000000;
        top: 10px;
      }
    }
  }
}

@keyframes el-skeleton-loading {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}
</style>
